<template>
  <div class="sec-l4">
    <div class="panel">
      <div class="panel-header">年轻干部</div>
      <div class="panel-content nqgb">
        <div class="nqgb-pie" ref="nqgbChar"></div>
        <ul class="nqgb-del">
          <li>
            <p class="nqbg-type">40岁以下处级干部</p>
            <div class="nqgb-n ">
              <span class="gb-v font-abl" style="margin-right:30px;">
                {{ splitNumber(nqgb[0].value) }}人</span
              >
              <span class="gb-per font-abl" style="margin-left:30px;"
                >{{ calcSexPersent(nqgb[0].value) }}%</span
              >
            </div>
          </li>
          <li>
            <p class="nqbg-type">领导班子成员45岁左右及以下干部</p>
            <div class="nqgb-n">
              <span class="gb-v font-abl" style="margin-right:30px;">
                {{ splitNumber(nqgb[1].value) }}人</span
              >
              <span class="gb-per font-abl" style="margin-left:30px;"
                >{{ calcSexPersent(nqgb[1].value) }}%</span
              >
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="panel">
      <div class="panel-header">职务层次</div>
      <div class="panel-content zwcc">
        <div class="zwcc-pie" ref="zwccChar"></div>
        <ul class="zwcc-list">
          <li class="zwcc-item" v-for="(item, index) in zwcc" :key="index">
            <p class="zwcc-type">{{ item.name }}</p>
            <p class="zwcc-n font-abl">
              {{ splitNumber(item.value) }}<span> 人</span>
            </p>
            <p class="zwcc-p font-abl">{{ calcPersent(item.value, zwcc) }}%</p>
          </li>
        </ul>
      </div>
    </div>
    <div class="panel">
      <div class="panel-header">专业分布</div>
      <div class="panel-content zyfb" ref="zyfbChar"></div>
    </div>
  </div>
</template>

<script>
import { commonPie, normalBar } from '@/utils/chartConfig'
import {
  count_nqgb_by_b0117_ranks,
  count_zwcc_by_b0117_ranks,
  count_zyfb_by_b0117_ranks
} from '@/api/common.js'
export default {
  name: 'secl4',
  data() {
    return {
      // 年轻干部
      nqgb: [
        { name: '40岁以下处级干部', value: 0 },
        { name: '领导班子成员 45岁左右及以下干部', value: 0 }
      ],
      // 专业分布
      zyfb: [
        { name: '哲学', value: 0, key: 'zhexue' },
        { name: '医学', value: 0, key: 'yixue' },
        { name: '管理学', value: 0, key: 'guanlixue' },
        { name: '军事学', value: 0, key: 'junshixue' },
        { name: '经济学', value: 0, key: 'jingjixue' },
        { name: '法学', value: 0, key: 'faxue' },
        { name: '教育学', value: 0, key: 'jiaoyuxue' },
        { name: '历史学', value: 0, key: 'lishixue' },
        { name: '文学', value: 0, key: 'wenxue' },
        { name: '理学', value: 0, key: 'lixue' },
        { name: '工学', value: 0, key: 'gongxue' },
        { name: '农学', value: 0, key: 'nongxue' }
      ],
      // 职务层次
      zwcc: [
        { name: '厅局正职', value: '0' },
        { name: '厅局副职', value: '0' },
        { name: '处级正职', value: '0' },
        { name: '处级副职', value: '0' }
      ],
      zyfbObr: null
    }
  },
  created() {},
  mounted() {
    this.initNqgb()
    this.initZwcc()
    this.initZyfb()
    count_nqgb_by_b0117_ranks().then(res => {
      this.nqgb = res.nqgb
      this.initNqgb()
    })
    count_zwcc_by_b0117_ranks().then(res => {
      this.zwcc = res.zwcc
      this.initZwcc()
    })
    count_zyfb_by_b0117_ranks().then(res => {
      this.zyfb = res.zyfb
      this.initZyfb()
    })
  },
  watch: {
    '$store.state.ranks': function() {
      //18 年轻干部分布
      count_nqgb_by_b0117_ranks().then(res => {
        this.nqgb = res.nqgb
        this.initNqgb()
      })
      // 19 统计职务层次分布
      count_zwcc_by_b0117_ranks().then(res => {
        this.zwcc = res.zwcc
        this.initZwcc()
      })
      // 20 统计专业分布
      count_zyfb_by_b0117_ranks().then(res => {
        this.zyfb = res.zyfb
        this.initZyfb()
      })
    }
  },
  methods: {
    // 年轻干部
    initNqgb() {
      let color = ['rgba(58, 236, 254, 1)', 'rgba(255, 212, 8, 1)']
      commonPie(this.$refs.nqgbChar, color, this.nqgb, ['70%', '85%'])
    },
    // 计算百分比
    calcSexPersent(n) {
      let t = this.nqgb[0].value * 1 + this.nqgb[1].value * 1
      if (t == 0 || n == 0) {
        return 0
      } else {
        return ((n / t) * 100).toFixed(2)
      }
    },
    calcPersent(i, t) {
      if (i == 0) {
        return 0
      }
      let a = 0
      t.forEach(item => {
        a += item.value * 1
      })
      if (t == 0) {
        return 0
      }
      return ((i * 100) / a).toFixed(2)
    },
    // 职务层次
    initZwcc() {
      let color = [
        'rgba(58, 236, 254, 1)',
        'rgba(0, 183, 239, 1)',
        'rgba(255, 212, 8, 1)',
        'rgba(242, 154, 159, 1)'
      ]

      commonPie(this.$refs.zwccChar, color, this.zwcc, ['70%', '85%'])
    },
    // 专业分布
    initZyfb() {
      let color = [
        'rgba(255, 192, 0, 1)',
        'rgba(255, 246, 0, 1)',
        'rgba(255, 242, 0, 1)'
      ]
      let x = []
      this.zyfb.forEach(item => {
        x.push(item.name)
      })
      if (this.zyfbObr) {
        normalBar(
          this.$refs.zyfbChar,
          x,
          this.zyfb,
          color,
          1,
          {
            top: 80,
            left: 80,
            bottom: 100
          },
          this.zyfbObr
        )
      } else {
        this.zyfbObr = normalBar(this.$refs.zyfbChar, x, this.zyfb, color, 1, {
          top: 80,
          left: 80,
          bottom: 100
        })
      }
    }
  }
}
</script>
<style lang="less" scoped>
.sec-l4 {
  position: relative;
  width: 596px;
  padding-top: 126px;
  margin-right: 80px;

  .zwcc {
    position: relative;
    height: 530px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    .zwcc-pie {
      position: absolute;
      left: 16px;
      height: 180px;
      width: 180px;
      background-color: rgb(57 57 57);
      border-radius: 50%;
      border: 1px solid rgba(0, 144, 253, 0.2);
      z-index: 10;
      background-image: url('~@/assets/images/zwcc-bg.png');
      background-position: center;
      background-repeat: no-repeat;
    }
    .zwcc-list {
      position: relative;
      width: 428px;
      margin-left: 150px;
      .zwcc-item {
        display: flex;
        height: 77px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-left: 60px;
        padding-right: 18px;
        background-color: rgba(0, 252, 232, 0.1);
        .zwcc-type {
          font-size: 24px;
          color: white;
          padding-right: 20px;
        }
        .zwcc-n {
          flex: 1;
          span {
            font-size: 24px;
            color: white;
          }
        }
        .zwcc-p {
          min-width: 80px;
        }
        .zwcc-n,
        .zwcc-p {
          // text-align: right;
          font-size: 24px;
          color: rgba(0, 255, 255, 1);
        }
        &:nth-of-type(2) {
          background-color: rgba(0, 144, 252, 0.1);
          .zwcc-n,
          .zwcc-p {
            color: rgba(0, 183, 239, 1);
          }
        }
        &:nth-of-type(3) {
          background-color: rgba(222, 239, 122, 0.1);
          .zwcc-n,
          .zwcc-p {
            color: rgba(255, 210, 0, 1);
          }
        }
        &:nth-of-type(4) {
          background-color: rgba(254, 112, 102, 0.1);
          .zwcc-n,
          .zwcc-p {
            color: rgba(242, 154, 159, 1);
          }
        }
      }
    }
  }
  .zyfb {
    height: 580px;
  }
}
</style>
